<template>
	<!-- 交换名片 -->
	<view class="businesscard-container">
		<!-- 自定义导航 -->
		<view class="myheader">
			<navigator open-type="navigateBack" class="back"><u-icon name="arrow-left" size="28rpx" color="#000"></u-icon>
			</navigator>
			<view :class="flag==true?'active':'btn'" @tap="handleBtn(true)">收到的</view>
			<view :class="flag==false?'active':'btn'" @tap="handleBtn(false)">送出的</view>
		</view>

		<!-- 内容 -->
		<view class="wrap">
			<view class="item" v-for="item in list" :key="item.id">
				<view class="l">
					<view class="img">
						<image :src="item.avatar" mode="widthFix"></image>
					</view>
					<view class="right">
						<view class="title">{{item.username}}</view>
						<view class="created">{{item.created_at}}</view>
					</view>
				</view>
				<view class="r" v-if="flag" @tap="handleYes(item.id)">同意交换</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// true收到 false送出
				flag: true,

				// list
				list: []
			}
		},
		methods: {

			/**
			 * 同意交换
			 */
			handleYes(id) {
				this.$request.post({
					url: '/api/users/handleBusinessCard',
					data: {
						id
					},
					success: res => {
						uni.showToast({
							title: res.result,
							icon: 'none'
						})
						this.getBusCard()
					}
				})
			},

			/**
			 * 点击导航栏切换
			 */
			handleBtn(flag) {
				this.flag = flag
				this.flag ? this.getBusCard() : this.getInitCard()
			},

			/**
			 * 获取收到的名片
			 */
			getBusCard() {
				this.list = []
				this.$request.post({
					url: '/api/users/businessCardLists',
					success: res => {
						if (res.code != 200) return uni.showToast({
							title: res.msg
						})
						this.list = res.result.data
					}
				})
			},

			/**
			 * 获取送出的名片
			 */
			getInitCard() {
				this.list = []
				this.$request.post({
					url: '/api/users/initiateForCardLists',
					success: res => {
						if (res.code != 200) return uni.showToast({
							title: res.msg
						})
						this.list = res.result.data
					}
				})
			},

		},
		onShow() {
			this.flag ? this.getBusCard() : this.getInitCard()
		}
	}
</script>

<style lang="less" scoped>
	.businesscard-container {
		width: 100%;
		min-height: 100vh;
		background-color: #fff;
		overflow: hidden;

		.myheader {
			width: 100%;
			height: 176rpx;
			position: relative;
			display: flex;
			justify-content: space-evenly;
			align-items: flex-end;
			padding-bottom: 22rpx;
			box-sizing: border-box;

			.back {
				position: absolute;
				bottom: 24rpx;
				left: 32rpx;
			}

			.btn {
				font-size: 36rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #999999;
				line-height: 52rpx;
			}

			.active {
				font-size: 36rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #333333;
				line-height: 52rpx;
			}
		}

		.wrap {
			width: 100%;
			padding: 0 40rpx;
			box-sizing: border-box;

			>.item {
				width: 100%;
				height: 132rpx;
				background-color: #fff;
				border-bottom: 2rpx solid #F1F1F1;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx 0;
				box-sizing: border-box;

				>.l {
					flex: 1;
					height: 100%;
					display: flex;

					>.img {
						width: 92rpx;
						height: 92rpx;
						border-radius: 50%;
						overflow: hidden;
						margin-right: 20rpx;

						>image {
							width: 100%;
						}
					}

					>.right {
						flex: 1;
						height: 100%;
						display: flex;
						flex-direction: column;
						justify-content: space-around;

						>.title {
							font-size: 28rpx;
							font-family: Source Han Sans CN-Medium, Source Han Sans CN;
							font-weight: 500;
							color: #333333;
							line-height: 28rpx;
						}

						>.created {
							font-size: 24rpx;
							font-family: Source Han Sans CN-Regular, Source Han Sans CN;
							font-weight: 400;
							color: #666666;
							line-height: 34rpx;
							letter-spacing: 1px;
						}
					}

				}

				>.r {
					width: 152rpx;
					height: 60rpx;
					background: rgba(39, 91, 168, .1);
					border-radius: 999rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 24rpx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #275BA8;
					line-height: 32rpx;
				}
			}
		}
	}
</style>